<template>
	<view>
		<view class="status_bar"></view>
		<web-view :src="routePath" @message="handleMessage" @onPostMessage="handleMessage"></web-view>
	</view>
</template>

<script setup>
	import {
		getAuthorization,
		getUserId
	} from "@/router/auth.js"

	const routePath = ref('');

	onLoad((opt) => {
		if (opt.route) {
			// 判断传过来的地址是否有参数
			const symbols = opt.route.includes('?') ? '&' : '?'
			routePath.value =
				`${opt.route}${symbols}userId=${getUserId()}&userName=${uni.getStorageSync('userName')}&token=${getAuthorization()}&datas=${opt.datas}`
		}

		// #ifdef APP-PLUS  
		const {
			windowHeight,
			statusBarHeight
		} = uni.getWindowInfo()

		let pages = getCurrentPages(),
			page = pages[pages.length - 1],
			ws = page.$getAppWebview();

		setTimeout(function() {
			const wv = ws.children()[0];
			wv.setStyle({
				//设置web-view距离顶部的距离以及自己的高度，单位为px
				top: statusBarHeight,
				height: windowHeight - statusBarHeight
			});
		}, 200);
		// #endif
	})

	function handleMessage() {
		console.log(evt);
		console.log('接收Html发送过来的消息：' + JSON.stringify(evt.detail.data[0]));
	}
</script>

<style scoped lang="scss">
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
		background-image: url("/static/status_bar.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>